<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/vue.js"></script>
    <title>姓名watch语法实现</title>
    <style> 
        .basic {
            width:100px;
            height:100px;
            border: 1px solid black;
        }
        .normal {
            background-color: rgb(15, 231, 159);
        }
        .happy {
            background-color: yellow;
        }
        .sad {
            background-color: pink;
            border-color: green
        }

        .atguigu1 {
            padding: 10px;
            border-radius: 20px;
        }
        .atguigu2 {
            background-color: rgb(14, 176, 230);
        }    
        .atguigu3 {
            color: red;
        }
    </style>
</head>
<body>
    <div id="root">
        <!-- 
            绑定样式
            1.class样式
                写法:class="xxx", xxx可以是字符串、对象、数组
                字符串写法适用于:类名不确定，要动态获取
                对象写法适用于:要绑定多个样式，个数不确定，名字也不确定，但不确定用不用
                数组写法适用于:要绑定多个样式，个数不确定，名字也不确定
            2.style样式
                写法:style="xxx", xxx可以是对象、数组
                :style=[a, b], 其中a,b 是样式对象
        -->
        <!-- 绑定class样式 字符串写法 适用于样式的类名不确定，需要动态指定 -->
        <div class="basic" :class="mood" @click="changeMode">{{name}}</div>
        <hr>
        <!-- 绑定class样式 数组写法 适用于样式的类名不确定，个数也不确定 -->
        <div class="basic" :class="classArr" @click="changeMode">{{name}}</div>
        <hr>
        <!-- 绑定class样式 对象写法 适用于样式的类名确定，个数也确定，但是到底用不用不确定 -->
        <div class="basic" :class="classObj" @click="changeMode">{{name}}</div>
        <hr>
        <!-- 绑定style样式 对象写法 -->
        <div class="basic" :style="styleObj" @click="changeMode">{{name}}</div>
        <hr>
        <!-- 绑定style样式 数组写法 -->
        <div class="basic" :style="[styleObj, styleObj2]" @click="changeMode">{{name}}</div>
    </div>
</body>
<script>
    Vue.config.keyCodes.huiche = 13; // 自定义tab键别名
    var vm = new Vue({
        el: '#root',
        data: {
            name: '尚硅谷',
            mood: 'normal',
            classArr: ['atguigu1', 'atguigu2', 'atguigu3'],
            classObj:{
                atguigu1: true,
                atguigu2: false
            },
            styleObj: {
                color: 'blue',
                fontSize: '40px'
            },
            styleObj2: {
                backgroundColor: 'green'
            },
            styleArr:[
                {
                    color: 'blue',
                    fontSize: '40px'
                },
                {
                    backgroundColor: 'green'
                }
            ]
        },
        methods: {
            changeMode: function() {
                const arrMood = ['normal', 'happy','sad'];
                var randomIndex = Math.floor(Math.random() * arrMood.length);
                this.mood = arrMood[randomIndex];
            }
        }
    })          
</script>
</html>